/*按天倒计时组件
  fn 时间停止的回调
  times 需要 对比当前时间 计算的时间
  type  外部控制样式
 */
import React, { useEffect, useState } from 'react';
import { toast } from '@/utils/utils';
import classNames from 'classnames';
import './index.less';
function getSeconds(s, val = false) {
  let second = parseInt(s); // 秒
  let minute = 0;
  let house = 0;
  let date = 0;
  if (second > 60) {
    //如果秒数大于60，将秒数转换成整数
    //获取分钟，除以60取整数，得到整数分钟
    minute = parseInt(second / 60);
    //获取秒数，秒数取佘，得到整数秒数
    second = parseInt(second % 60);
    //秒数
    if (minute > 60) {
      //获取小时，获取分钟除以60，得到整数小时
      house = parseInt(minute / 60);
      //获取小时后取佘的分，获取分钟除以60取佘的分
      minute = parseInt(minute % 60);
    }
    if (house > 24) {
      //获取小时，获取分钟除以24，得到整数小时
      date = parseInt(house / 24);
      //获取小时后取佘的分，获取分钟除以60取佘的分
      house = parseInt(house % 24);
    }
  }
  var result = '';
  if (second >= 0 && second < 10) {
    result = '0' + parseInt(second) + '';
  } else {
    result = '' + parseInt(second) + '';
  }
  if (minute >= 0 && minute < 10) {
    result = '0' + parseInt(minute) + ':' + result;
  } else {
    result = '' + parseInt(minute) + ':' + result;
  }
  if (house >= 0 && house < 10) {
    result = '0' + parseInt(house) + ':' + result;
  } else {
    result = '' + parseInt(house) + ':' + result;
  }
  if (date > 0) {
    result = parseInt(date) + '天' + result;
  }
  if (s > 0) {
    if (!val) {
      return result;
    } else {
      let list = result.split('天');
      if (list.length === 2) {
        list = [list[0], ...list[1].split(':')];

        return (
          <div className="time_box">
            {list.map((item, index) => {
              if (index === 0) {
                return (
                  <div key={index} style={{ marginRight: '8' }} className="time_box">
                    <div style={{ color: '#ffffff' }}>{item}天</div>
                  </div>
                );
              } else if (index === list.length - 1) {
                return (
                  <div key={index} className="time_box">
                    <div className="time_color_box public_center">{item}</div>
                  </div>
                );
              } else {
                return (
                  <div key={index} className="time_box">
                    <div className="time_color_box public_center">{item}</div>
                    <div className="time_color_font">:</div>
                  </div>
                );
              }
            })}
          </div>
        );
      } else {
        list = [...list.toString().split(':')];
        return (
          <div className="time_box">
            {list.map((item, index) => {
              if (index === list.length - 1) {
                return (
                  <div key={index} className="time_box">
                    <div className="time_color_box public_center">{item}</div>
                  </div>
                );
              } else {
                return (
                  <div key={index} className="time_box">
                    <div className="time_color_box public_center">{item}</div>
                    <div className="time_color_font">:</div>
                  </div>
                );
              }
            })}
          </div>
        );
      }
    }
  } else return '';
}
export default (props) => {
  const { startTime = '', endTime = '', type = 'start', styles = true, fn } = props;
  let nowTime = parseInt(new Date().getTime() / 1000);
  let startTimeM = parseInt(new Date(startTime.replace(/-/g, '/')).getTime() / 1000);
  let entTimeM = parseInt(new Date(endTime.replace(/-/g, '/')).getTime() / 1000);
  const [interVal, setIntervals] = useState(0);
  let i = 0;
  useEffect(() => {
    let collection = true;
    let setTime = null;
    if (type === 'start') {
      setTime = setInterval(() => {
        i++;
        setIntervals(entTimeM - nowTime - i);
        if (entTimeM - nowTime - i <= 0 || collection === false) {
          clearInterval(setTime);
          fn && fn();
        }
      }, 1000);
    } else if (type === 'before') {
      setTime = setInterval(() => {
        i++;
        setIntervals(startTimeM - nowTime - i);
        if (startTimeM - nowTime - i <= 0 || collection === false) {
          clearInterval(setTime);
          fn && fn();
        }
      }, 1000);
    }

    return () => {
      collection = false;
      clearInterval(setTime);
    };
  }, []);
  return (
    <div className="time_box_info">
      <div className="time_box">{type === 'start' ? '结束倒计时' : '秒杀倒计时'}</div>
      <div className={classNames('time_box  time_margin')}>{getSeconds(interVal, styles)}</div>
    </div>
  );
};
